<template>
    <div class="publicpageview">
        <div class="publicformview">
            <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="区房屋管理单位：" prop="districtId">
                            <CompanySelect v-model="listQuery.districtId" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="管理部(分中心)：" prop="houseAdminId">
                            <DeptBrowser v-model="listQuery.houseAdminId" :queryDistrictId="listQuery.districtId" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="应急抢险时间：" prop="rescueTime">
                            <el-date-picker v-model="listQuery.rescueTime" type="date" placeholder="年/月/日"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div>
                            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
                            <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="publitableview">
            <el-button type="success" size="mini" @click="handleExport">导出</el-button>

            <!-- 统计表格 -->
            <div class="statistics-container">
                <div class="statistics-header">
                    <h3 class="statistics-title">窨井盖统计表</h3>
                    <div class="statistics-info">
                        <span class="unit-info">项目单位：{{ userDname+userHouseAdminName }}</span>
                        <span class="time-info">{{ currentTime }}</span>
                    </div>
                </div>

                <el-table :data="statisticsData" border size="mini" class="statistics-table" :key="itemKey">
                    <el-table-column align="center" width="100" fixed="left">
                        <template slot="header">
                            <div>项目</div>
                        </template>
                        <template slot-scope="scope">
                            <span>{{ scope.row.years }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" width="80">
                        <template slot="header">
                            <div class="header-row2">合计</div>
                            <div class="header-row3">处</div>
                        </template>
                        <template slot-scope="scope">
                            <span>{{ allNumber(scope.row) }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="其   中" header-align="center">
                        <el-table-column align="center" width="110">
                            <template slot="header">
                                <div class="header-row2">街道井盖</div>
                                <div class="header-row3">处{{num1}}</div>
                            </template>
                            <template slot-scope="scope">
                                <span>{{ scope.row.count1 }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" width="110">
                            <template slot="header">
                                <div class="header-row2">小区井盖</div>
                                <div class="header-row3">处{{num2}}</div>
                            </template>
                            <template slot-scope="scope">
                                <span>{{ scope.row.count2 }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" width="110">
                            <template slot="header">
                                <div class="header-row2">管线井盖</div>
                                <div class="header-row3">处{{num3}}</div>
                            </template>
                            <template slot-scope="scope">
                                <span>{{ scope.row.count3 }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" width="110">
                            <template slot="header">
                                <div class="header-row2">排水井盖</div>
                                <div class="header-row3">处{{num4}}</div>
                            </template>
                            <template slot-scope="scope">
                                <span>{{ scope.row.count4 }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>

                    <el-table-column align="center" min-width="100">
                        <template slot="header">
                            <div>备注</div>
                        </template>
                        <template slot-scope="scope">
                            <span>{{ scope.row.note }}</span>
                        </template>
                    </el-table-column>
                </el-table>

            </div>

            <div class="publicpaginationview">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="listQuery.page" background :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    small>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { statisticscoverAdmin } from '@/api/safe/yinjinggaiguanli/yinjinggaizhili'
import CompanySelect from "@/components/commonSelect/companySelect.vue"
import DeptBrowser from "@/components/SysBrowser/DeptBrowser.vue"
import { convertObjectIntegersToStrings } from '@/utils/dataUtils'
import * as XLSX from 'xlsx'
export default {
    name: 'YingjiQiangxianTongji',
    components: { CompanySelect, DeptBrowser },

    data() {
        return {
            listQuery: {
                page: 1,
                pageSize: 10,
                rescueTime: "",
                districtId: '',
                houseAdminId: ''
            },
            total: 0,
            currentTime: "",
            statisticsData: [
            ],

            allChuNumber: '',
            num1: '',
            num2: '',
            num3: '',
            num4: '',

            itemKey: '',
            allNumberChu: '',
            userDname: '',
            userHouseAdminName: ''
        };
    },

    mounted() {

        this.currentTime = dayjs().format('YYYY-MM');
        this.userDname = localStorage.getItem('userDname') != 'null' ? localStorage.getItem('userDname') : ''
        this.userHouseAdminName = localStorage.getItem('userHouseAdminName') != 'null' ? localStorage.getItem('userHouseAdminName') : ''
        this.getList();
    },

    methods: {
        allNumber(row) {
            return Number(row.count1) + Number(row.count2) + Number(row.count3) + Number(row.count4)
        },
        // 分页大小改变
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },

        // 当前页改变
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.getList();
        },

        // 获取列表数据
        getList() {
            // 构建请求参数，过滤空值
            const params = {};
            Object.keys(this.listQuery).forEach(key => {
                if (this.listQuery[key] !== '') {
                    params[key] = this.listQuery[key];
                }
            });
            // 调用应急抢险分页接口
            statisticscoverAdmin(params)
                .then(response => {
                    if (response.code == 200) {
                        this.statisticsData = convertObjectIntegersToStrings(response.data.list || []);
                        this.total = response.data.total || 0;

                        let num1 = 0
                        let num2 = 0
                        let num3 = 0
                        let num4 = 0

                        let allNumberChu = 0
                        this.statisticsData.forEach((item, index) => {
                            num1 += Number(item.count1)
                            num2 += Number(item.count2)
                            num3 += Number(item.count3)
                            num4 += Number(item.count4)

                            allNumberChu += this.allNumber(item)
                        })
                        this.statisticsData.push({
                            count1: num1,
                            count2: num2,
                            count3: num3,
                            count4: num4,

                            years: '合计'
                        })
                        this.itemKey = Math.random();



                    } else {
                        this.$message.error(response.message || '获取数据失败');
                    }
                })
        },

        // 搜索
        handleSearch() {
            this.listQuery.page = 1;
            this.currentTime = dayjs().format('YYYY-MM');

            this.getList();

        },

        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();

            this.currentTime = dayjs().format('YYYY-MM');
            this.getList();
        },

        // 导出功能
        handleExport() {


            let outList = []
            this.statisticsData.forEach((item, index) => {
                outList.push({
                    项目: item.years,
                    合计: this.allNumber(item),
                    街道井盖: item.count1,
                    小区井盖: item.count2,
                    管线井盖: item.count3,
                    排水井盖: item.count4,

                })
            })
            // 获取表格数据
            const data = outList
            // 转换数据为工作表
            const worksheet = XLSX.utils.json_to_sheet(data)
            // 创建新的工作簿
            const workbook = XLSX.utils.book_new()
            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
            // 导出Excel文件
            XLSX.writeFile(workbook, '窨井盖统计.xlsx')
        }

    }
}

</script>

<style scoped>
.statistics-container {
    margin-top: 20px;
}

.statistics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
}

.statistics-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align: center;
    flex: 1;
}

.statistics-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.unit-info,
.time-info {
    font-size: 14px;
    color: #666;
}

.statistics-table {
    width: 100%;
}

.statistics-table .el-table__header-wrapper {
    background-color: #f5f7fa;
}

.statistics-table .el-table__header th {
    background-color: #f5f7fa;
    color: #333;
    font-weight: 600;
    text-align: center;
    border-right: 1px solid #dfe6ec;
}

.statistics-table .el-table__body td {
    text-align: center;
    border-right: 1px solid #dfe6ec;
}

.unit-label {
    font-size: 12px;
    color: #909399;
    margin-top: 2px;
}

/* 三层表头样式 */
.header-row1 {
    height: 20px;
    line-height: 20px;
    font-weight: 600;
    border-bottom: 1px solid #dfe6ec;
}

.header-row2 {
    height: 25px;
    line-height: 25px;
    font-weight: 600;
    border-bottom: 1px solid #dfe6ec;
}

.header-row3 {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #909399;
}

/* 表格行样式 */
.statistics-table ::v-deep .el-table__row:nth-child(1) {
    background-color: #f9f9f9;
}

.statistics-table ::v-deep .el-table__row:nth-child(2) {
    background-color: #ffffff;
}

.statistics-table ::v-deep .el-table__row:nth-child(3) {
    background-color: #f0f9ff;
    font-weight: 600;
}

/* 固定列样式 */
.statistics-table ::v-deep .el-table__fixed-column--left {
    background-color: #fafafa;
}

/* 表头样式优化 */
.statistics-table ::v-deep .el-table th {
    padding: 0;
    height: 65px;
    vertical-align: middle;
}

.statistics-table ::v-deep .el-table th .cell {
    padding: 0;
    line-height: 1;
}

.statistics-table ::v-deep .el-table td {
    padding: 10px 0;
}

/* 多级表头样式 */
.statistics-table ::v-deep .el-table__header th {
    height: 65px !important;
}

.statistics-table ::v-deep .el-table__header .has-gutter {
    height: 65px !important;
}
</style>